<template>
    <div class="airblower">
        <div class="airblowerItem">
            <div class="airbName">
                <div class="name">1#风机</div>
                <div class="status"><span></span>通讯中</div>
            </div>
            <div class="content">
                <el-switch
                    v-model="model"
                    style="--el-switch-on-color: #13ce66"
                    active-text="自动模式"
                    inactive-text="手动模式"
                />
                <div class="options">
                    <el-button :disabled="model" type="primary">启动</el-button>
                    <el-button :disabled="model" type="warning">停止</el-button>
                </div>
                <div class="itemList">
                    <p>
                        <span class="itemLabel">流量反馈：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">工作转速：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">滤网压差：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">运行功率：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">排气压力：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">输入电流：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">运行时间：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">流量设定：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">风量设定(㎡/min)：</span>
                        <el-input
                            v-model="input"
                            style="width: 100px; margin-right: 10px"
                            size="small"
                            placeholder="请输入设定值"
                        ></el-input>
                        <el-button :disabled="model" type="primary" size="small"
                            >保存</el-button
                        >
                    </p>
                </div>
            </div>
        </div>
        <div class="airblowerItem">
            <div class="airbName">
                <div class="name">2#风机</div>
                <div class="status"><span></span>通讯中</div>
            </div>
            <div class="content">
                <el-switch
                    v-model="model"
                    style="--el-switch-on-color: #13ce66"
                    active-text="自动模式"
                    inactive-text="手动模式"
                />
                <div class="options">
                    <el-button :disabled="model" type="primary">启动</el-button>
                    <el-button :disabled="model" type="warning">停止</el-button>
                </div>
                <div class="itemList">
                    <p>
                        <span class="itemLabel">流量反馈：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">工作转速：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">滤网压差：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">运行功率：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">排气压力：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">输入电流：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">运行时间：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">流量设定：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">风量设定(㎡/min)：</span>
                        <el-input
                            v-model="input"
                            style="width: 100px; margin-right: 10px"
                            size="small"
                            placeholder="请输入设定值"
                        ></el-input>
                        <el-button :disabled="model" type="primary" size="small"
                            >保存</el-button
                        >
                    </p>
                </div>
            </div>
        </div>
        <div class="airblowerItem">
            <div class="airbName">
                <div class="name">3#风机</div>
                <div class="status"><span></span>通讯中</div>
            </div>
            <div class="content">
                <el-switch
                    v-model="model"
                    style="--el-switch-on-color: #13ce66"
                    active-text="自动模式"
                    inactive-text="手动模式"
                />
                <div class="options">
                    <el-button :disabled="model" type="primary">启动</el-button>
                    <el-button :disabled="model" type="warning">停止</el-button>
                </div>
                <div class="itemList">
                    <p>
                        <span class="itemLabel">流量反馈：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">工作转速：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">滤网压差：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">运行功率：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">排气压力：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">输入电流：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">运行时间：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">流量设定：</span>
                        <span class="itemValue"></span>
                    </p>
                    <p>
                        <span class="itemLabel">风量设定(㎡/min)：</span>
                        <el-input
                            v-model="input"
                            style="width: 100px; margin-right: 10px"
                            size="small"
                            placeholder="请输入设定值"
                        ></el-input>
                        <el-button :disabled="model" type="primary" size="small"
                            >保存</el-button
                        >
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
const model = ref(true);
</script>

<style scoped lang="less">
.airblower {
    display: flex;
    flex-direction: row;
    .airblowerItem {
        flex: 1;
        .airbName {
            height: 24px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border-left: 4px solid #409eff;
            padding: 0 40px 0 12px;
            .name {
                line-height: 24px;
                font-size: 16px;
            }
            .status {
                line-height: 24px;
                font-size: 14px;
                span {
                    display: inline-block;
                    margin-right: 5px;
                    width: 10px;
                    height: 10px;
                    border-radius: 5px;
                    background: #13ce66;
                }
            }
        }
        .content {
            padding: 16px;
            .options {
                margin: 10px 0;
            }
            .itemList {
                p {
                    span {
                        font-size: 14px;
                        color: #666;
                        line-height: 2.5;
                    }
                }
            }
        }
    }
}
</style>